<template>
	<view class="content">
		<view class="tabs-con">
			<u-tabs :list="tab" @change="setTab" :current="current" active-color="#333333" :is-scroll="false"></u-tabs>
		</view>
		<block v-if="dataList.length>0">
			<view class="list-con" v-for="(item,index) in dataList" :key="index">
				<view class="item-box">
					<text class="item-text">序列号：</text>
					<text class="item-value">dasw2154vg65132132</text>
				</view>
				<view class="item-box">
					<text class="item-text">型号：</text>
					<text class="item-value">JAWS FULL TOE挖起杆</text>
				</view>
				<view class="item-box">
					<text class="item-text">申请时间：</text>
					<text class="item-value">2023-05-19 17:40</text>
				</view>
				<view class="item-box">
					<text class="item-text">状态：</text>
					<text class="item-value">待审核</text>
				</view>
				<view class="item-two-box">
					<view class="item-btn" @click="goRecordStatus">查看详情</view>
				</view>
			</view>
		</block>
		<!-- 无记录状态 -->
		<block v-else>
			<icon-status :imgUrl="'../../pageMember/static/icon9.png'" :statusInfo="'暂无数据'"></icon-status>
		</block>
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		components: {
			iconStatus
		},
		data() {
			return {
				dataList: [],
				tab: [{
						name: '全部',
						id: ''
					},
					{
						name: '待审核',
						id: 1
					},
					{
						name: '通过',
						id: 2
					},
					{
						name: '未通过',
						id: 3
					}
				],
				current: 0
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中"
			});
			this.myIntegralBill();
		},
		methods: {
			myIntegralBill() {
				this.$u.api.integralBillApi({}).then(res => {
					if (res.code == 1) {
						console.log('我的积分：', res);
						this.dataList = res.data;
					}
				});
			},
			// tab点击
			setTab(item) {
				console.log(item)
				this.current = item
			},
			// 查看详情
			goRecordStatus() {
				uni.navigateTo({
					url:'./recordStatus'
				})
			}
		},
		onReachBottom() {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		// padding: 0 20rpx;
		min-height: 100vh;
		background-color: #F6F7FC;
		.tabs-con {
			box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.06);
		}
		.list-con {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 40rpx 30rpx;
			background-color: #fff;
			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				&:not(:first-child) {
					margin-top: 40rpx;
				}
				.item-text {
					color: #8B8F93;
				}
				.item-value {
					color: #333333;
				}
			}
			.item-two-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 40rpx;
				.item-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 180rpx;
					height: 68rpx;
					background: #000000;
					border-radius: 8rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
</style>